import type { ProColumns } from '@ant-design/pro-components';
import dayjs from 'dayjs';
import { AutoComplete } from 'antd';
import type { LessonItem } from '../data.d';

interface SearchFormProps {
  enumValues: {
    来源: string[];
    失效工序: string[];
    工厂: string[];
    项目名称: string[];
  };
}

// 创建搜索表单的列配置
export const createSearchColumns = (
  enumValues: SearchFormProps['enumValues'],
): ProColumns<LessonItem>[] => {
  return [
    {
      title: 'LessonID',
      dataIndex: 'LessonID',
      tip: 'LessonID 格式为 Lesson-YYYYMMDD_v版本号-序号',
      valueType: 'text',
      fieldProps: {
        placeholder: '请输入 LessonID 进行搜索',
      },
      width: 200,
      copyable: true,
    },
    {
      title: '来源',
      dataIndex: '来源',
      valueType: 'text',
      fieldProps: {
        placeholder: '请选择或输入来源',
      },
      renderFormItem: (_, { type, defaultRender, ...rest }, form) => {
        if (type === 'form') {
          return null;
        }
        const enumOptions = enumValues.来源.map((value) => ({
          value,
          label: value,
        }));
        return (
          <AutoComplete
            {...rest}
            placeholder="请选择或输入来源"
            options={enumOptions}
            filterOption={(inputValue, option) =>
              option?.value?.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1 ||
              option?.label?.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
            }
            allowClear
          />
        );
      },
      width: 100,
    },
    {
      title: '失效工序',
      dataIndex: '失效工序',
      valueType: 'text',
      fieldProps: {
        placeholder: '请选择或输入失效工序',
      },
      renderFormItem: (_, { type, defaultRender, ...rest }, form) => {
        if (type === 'form') {
          return null;
        }
        const enumOptions = enumValues.失效工序.map((value) => ({
          value,
          label: value,
        }));
        return (
          <AutoComplete
            {...rest}
            placeholder="请选择或输入失效工序"
            options={enumOptions}
            filterOption={(inputValue, option) =>
              option?.value?.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1 ||
              option?.label?.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
            }
            allowClear
          />
        );
      },
      width: 100,
    },
    {
      title: '工厂',
      dataIndex: '工厂',
      valueType: 'text',
      fieldProps: {
        placeholder: '请选择或输入工厂',
      },
      renderFormItem: (_, { type, defaultRender, ...rest }, form) => {
        if (type === 'form') {
          return null;
        }
        const enumOptions = enumValues.工厂.map((value) => ({
          value,
          label: value,
        }));
        return (
          <AutoComplete
            {...rest}
            placeholder="请选择或输入工厂"
            options={enumOptions}
            filterOption={(inputValue, option) =>
              option?.value?.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1 ||
              option?.label?.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
            }
            allowClear
          />
        );
      },
      width: 100,
    },
    {
      title: '项目名称',
      dataIndex: '项目名称',
      valueType: 'text',
      fieldProps: {
        placeholder: '请选择或输入项目名称',
      },
      renderFormItem: (_, { type, defaultRender, ...rest }, form) => {
        if (type === 'form') {
          return null;
        }
        const enumOptions = enumValues.项目名称.map((value) => ({
          value,
          label: value,
        }));
        return (
          <AutoComplete
            {...rest}
            placeholder="请选择或输入项目名称"
            options={enumOptions}
            filterOption={(inputValue, option) =>
              option?.value?.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1 ||
              option?.label?.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
            }
            allowClear
          />
        );
      },
      width: 100,
    },
    {
      title: '发生时间',
      dataIndex: '发生时间',
      valueType: 'dateRange',
      sorter: true,
      hideInTable: false,
      search: {
        transform: (value: any[]) => {
          if (Array.isArray(value) && value.length === 2 && value[0] && value[1]) {
            const start = dayjs.isDayjs(value[0]) ? value[0] : dayjs(value[0]);
            const end = dayjs.isDayjs(value[1]) ? value[1] : dayjs(value[1]);
            return {
              发生时间: [start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD')],
            };
          }
          return {};
        },
      },
      width: 150,
    },
  ];
};

